// 获取学生信息 并渲染页面
function renderStudent() {
    axios.get('/students').then(({ data: res }) => {
        console.log(res);
        let ary = res.data.map(item => {
            return `
            <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? '男' : '女'}</td>
                      <td>第${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province} ${item.city} ${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i data-id=${item.id} class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i data-id=${item.id} class="bi bi-trash"></i></a>
                      </td>
                    </tr>
            `
        });
        document.querySelector('tbody').innerHTML = ary.join('');
    })
};
renderStudent();
// 初始化模态框
let modal = new bootstrap.Modal(document.querySelector('#modal'));

// 给添加按钮注册点击事件
document.querySelector('#openModal').addEventListener('click', function () {
    document.querySelector('#modal h5').innerHTML = '添加学员';
    // 重置表单
    document.querySelector('#form').reset();
    modal.show();
});
// 获取省市县标签
let province = document.querySelector('[name=province]');
let city = document.querySelector('[name=city]');
let area = document.querySelector('[name=area]');
let initCity = () => {
    // 初始化省市县
    axios.get('/api/province').then(({ data: res }) => {
        let res1 = res.data.map(item => `<option value="${item}">--${item}--</option>`);
        province.innerHTML = '<option value="">--省--</option>' + res1.join('');
    });
    // 当省切换的时候获取市
    province.addEventListener('change', async function () {
        // 当省切换的时候重置县
        area.innerHTML = '<option value="">--县--</option>';
        // 当省 选择省/空 的时候重置市
        if (province.value === '') {
            return city.innerHTML = '<option value="">--市--</option>';
        }
        let { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
        let res1 = res.data.map(item => `<option value="${item}">--${item}--</option>`);
        city.innerHTML = '<option value="">--市--</option>' + res1.join('');
    });
    // 切换市的时候获取县
    city.addEventListener('change', async function () {

        // 当市 选择市/空 的时候重置市
        if (city.value === '') {
            return area.innerHTML = '<option value="">--县--</option>';
        }
        let { data: res } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
        let res1 = res.data.map(item => `<option value="${item}">--${item}--</option>`);
        area.innerHTML = '<option value="">--县--</option>' + res1.join('');
    });
};
initCity();
// 给确定按钮增加点击事件
document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault();
    let data = val(document.querySelector('#form'));
    data.age = +data.age;
    data.gender = +data.gender;
    data.hope_salary = +data.hope_salary;
    data.salary = +data.salary;
    data.group = +data.group;
    let title = document.querySelector('#modal h5').innerHTML;
    if (title == '添加学员') {
        try {
            let { data: res } = await axios.post('/students', data);
            message.success(res.message)
            modal.hide();
            renderStudent();
        } catch (e) {
            message.error('添加学生失败')
        }
    } else if (title == '修改学员') {
        try {
            let id = document.querySelector('#modal h5').dataset.id;
            let { data: res } = await axios.put(`/students/${id}`, data);
            message.success(res.message)
            modal.hide();
            renderStudent();
        } catch (e) {
            message.error('修改学生信息失败')
        }
    }

})
// 删除操作
// 事件委托
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 判断如果是删除操作
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        // 对于敏感操作 需要加提示   主要先锻炼这个思想
        if (!confirm('你确定要删除吗')) return
        try {
            let { data: res } = await axios.delete(`/students/${id}`);
            message.success('删除成功');
            renderStudent();
        } catch (e) {
            message.error('删除失败');
        }
    }
    // 判断如果是编辑操作
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id;
        document.querySelector('#modal h5').innerHTML = '修改学员';
        document.querySelector('#modal h5').setAttribute('data-id', id);
        modal.show();
        // 做数据回填 首先获取数据 进行回填
        let { data: res } = await axios.get(`/students/${id}`);
        // 先获取市和县 然后再数据回填
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } });
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } });
        let [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2]);

        // 渲染页面
        let ary1 = c.map(item => `<option value="${item}">--${item}--</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + ary1.join('');
        let ary2 = a.map(item => `<option value="${item}">--${item}--</option>`)
        area.innerHTML = '<option value="">--县--</option>' + ary2.join('');
        // 利用插件数据回填
        val(document.querySelector('#form'), res.data)
    }
})